<template>
  <div class="product-container">
    <!-- 横向导航栏 - 美化样式 -->
    <el-menu
      mode="horizontal"
      @select="handleSelect"
      class="category-menu"
      active-text-color="#409EFF"
      text-color="#333"
      :default-active="activeCategory">
      <el-menu-item
        v-for="item in 3"
        :index="item.toString()"
        :key="item"
        class="menu-item">
        分类{{ item }}
      </el-menu-item>
    </el-menu>

    <!-- 产品展示 - 添加过渡动画和悬停效果 -->
    <transition-group
      name="product-fade"
      tag="el-row"
      :gutter="20"
      class="product-grid">
      <el-col
        :span="6"
        v-for="product in filteredProducts"
        :key="product.id"
        class="product-col">
        <el-card
          class="product-card"
          shadow="hover"
          :body-style="{ padding: '0' }">
          <div class="image-container">
            <img
              :src="product.image"
              class="product-image"
              @error="handleImageError" />
          </div>
          <div class="product-info">
            <div class="product-name">{{ product.name }}</div>
            <div class="product-price">￥{{ product.price }}</div>
            <div class="product-detail" :title="product.detail">{{ product.detail }}</div>
          </div>
        </el-card>
      </el-col>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeCategory: '1',
      products: [
        { id: 1, category: '1', image: 'https://ts1.tc.mm.bing.net/th/id/R-C.d4d5a9a4bd730844eb4aa274bb395c79?rik=13CNq9%2fww2F0Wg&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd20230420ac%2f120%2fw1328h1992%2f20230420%2f8dd8-00d8c4823d445eaf9cd6fdc3f01e1b18.jpg&ehk=hux2VJ8T5fSiEZJ4trUunYrHmCVMECOvxb6GaRlqWpE%3d&risl=&pid=ImgRaw&r=0', name: '产品1', price: 100, detail: '这是产品1的详细信息11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111' },
        { id: 2, category: '1', image: 'https://via.placeholder.com/300x200?text=Product+2', name: '产品2', price: 200, detail: '这是产品2的详细信息' },
        { id: 3, category: '2', image: 'https://via.placeholder.com/300x200?text=Product+3', name: '产品3', price: 300, detail: '这是产品3的详细信息' },
        { id: 4, category: '1', image: 'https://via.placeholder.com/300x200?text=Product+4', name: '产品4', price: 150, detail: '这是产品4的详细信息' },
        { id: 5, category: '3', image: 'https://via.placeholder.com/300x200?text=Product+5', name: '产品5', price: 250, detail: '这是产品5的详细信息' },
        { id: 6, category: '2', image: 'https://via.placeholder.com/300x200?text=Product+6', name: '产品6', price: 350, detail: '这是产品6的详细信息' },
      ],
      filteredProducts: [],
    };
  },
  methods: {
    handleSelect(index) {
      this.activeCategory = index;
      this.filteredProducts = this.products.filter(product => product.category === index);
    },
    handleImageError(e) {
      e.target.src = 'https://via.placeholder.com/300x200?text=Image+Error';
    }
  },
  mounted() {
    this.handleSelect('1'); // 默认展示分类1的产品
  },
};
</script>

<style scoped>
.product-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.category-menu {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  background: linear-gradient(to right, #f5f7fa, #e4e7ed, #f5f7fa);
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.menu-item {
  font-size: 16px;
  font-weight: 500;
  padding: 0 30px;
  transition: all 0.3s;
}

.menu-item:hover {
  background-color: rgba(64, 158, 255, 0.1);
  color: #409EFF !important;
}

.product-grid {
  margin-top: 20px;
}

.product-col {
  margin-bottom: 20px;
  transition: all 0.3s;
}

.product-card {
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  border: none;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

.image-container {
  overflow: hidden;
  height: 200px;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.product-card:hover .product-image {
  transform: scale(1.05);
}

.product-info {
  padding: 15px;
  text-align: center;
}

.product-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
}

.product-price {
  color: #f56c6c;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.product-detail {
  font-size: 14px;
  color: #666;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
  width: 100%; /* 设置宽度，确保超出部分隐藏 */
  margin-top: 5px;
}

/* 过渡动画 */
.product-fade-enter-active,
.product-fade-leave-active {
  transition: all 0.5s ease;
}

.product-fade-enter,
.product-fade-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

.product-fade-move {
  transition: transform 0.5s;
}
</style>
